<!--  -->
<script setup>
import { ref, reactive, onMounted } from 'vue'
import * as echarts from 'echarts'
import axios from "../../utils/http.js";
const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
const info = ref();
const info2=ref();
let score_list = ref([]);
let class_name = ref('');
let exam_date = ref([]);
let b_num = ref(0);
let num = ref(0);
async function fetchDataAndDrawChart() {
  try {
    const res1 = await axios({
      method: 'get',
      url: "zhineng/query_score/",
    });

    exam_date.value = res1.data.class_score_list[0].exam_date;
    class_name.value = res1.data.class_score_list[0].class_name;
    score_list.value = res1.data.class_score_list[0].score;
    drawechart();

    const res2 = await axios({
      url: "zhineng/break/" + class_name.value + "/",
      method: "GET",
    });

    b_num.value = res2.data.break_num;
    num.value = res2.data.total_num;
    drawechart2();
  } catch (error) {
    
  }
}


onMounted(fetchDataAndDrawChart);


function drawechart(){
    var infoEl = info.value;
    var userEc = echarts.init(infoEl, "light");
    var option = {
        backgroundColor: '#fff',
        title: {
            text: '班级学生成绩分布',
            textStyle: {
                fontSize: 18,
                fontWeight: 400
            },
            left: 'center',
            top: '5%'
        },
        legend: {
            icon: 'circle',
            top: '5%',
            right: '5%',
            itemWidth: 6,
            itemGap: 20,
            textStyle: {
                color: '#556677'
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                label: {
                    show: true,
                    backgroundColor: '#fff',
                    color: '#556677',
                    borderColor: 'rgba(0,0,0,0)',
                    shadowColor: 'rgba(0,0,0,0)',
                    shadowOffsetY: 0
                },
                lineStyle: {
                    width: 0
                }
            },
            backgroundColor: 'dark',
            textStyle: {
                color: '#5c6c7c'
            },
            padding: [10, 10],
            extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
        },
        grid: {
            top: '15%'
        }, xAxis: [{
            type: 'category',
            data: exam_date.value,
            axisLine: {
                lineStyle: {
                    color: '#DCE2E8'
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                interval: 0,
                textStyle: {
                    color: '#556677'
                },
                fontSize: 12,
                margin: 15
            },
            axisPointer: {
                label: {
                    padding: [0, 0, 10, 0],
                    margin: 15,
                    fontSize: 12,
                    backgroundColor: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: '#fff' 
                        }, {
                            offset: 0.86,
                            color: '#fff' 
                        }, {
                            offset: 0.86,
                            color: '#33c0cd' 
                        }, {
                            offset: 1,
                            color: '#33c0cd' 
                        }],
                        global: false 
                    }
                }
            },
            boundaryGap: false
        }],
        yAxis: [{
            type: 'value',
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#DCE2E8'
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#556677'
                }
            },
            splitLine: {
                show: false
            }
        }, {
            type: 'value',
            position: 'right',
            axisTick: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: '#556677'
                },
                formatter: '{value}'
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#DCE2E8'
                }
            },
            splitLine: {
                show: false
            }
        }], series: [
            {
                name: class_name.value,
                type: 'line',
                data: score_list.value,
                symbolSize: 1,
                yAxisIndex: 1,
                symbol: 'circle',
                smooth: true,
                showSymbol: false,
                lineStyle: {
                    width: 5,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: '#5FBFFF'
                    },
                    {
                        offset: 1,
                        color: '#5FBFFF'
                    }
                    ]),
                    shadowColor: 'rgba(254,154,139, 0.3)',
                    shadowBlur: 10,
                    shadowOffsetY: 20
                },
                itemStyle: {
                    normal: {
                        color: colorList[2],
                        borderColor: colorList[2]
                    }
                }
            },
        ]
    }
    userEc.setOption(option);
}
function drawechart2() {
    var infoE2 = info2.value;
    var userEn = echarts.init(infoE2, "light");
    var scale = 1;
    var echartData = [{
        value: b_num.value,
        name: '班级违纪人数',
        itemStyle: {
            normal: { //颜色渐变
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#5FBFFF'},
                        {offset: 1, color: '#fff'}
                    ]
                )
            }
        }
    }]
    var total_datas = num.value;
    var rich = {
        yellow: {
            color: "#ffc72b",
            fontSize: 15 * scale,
            align: 'center'
        },
        total: {
            color: "#ffc72b",
            fontSize: 40 * scale,
            align: 'center'
        },

        blue: {
            color: '#49dff0',
            fontSize: 16 * scale,
            align: 'center'
        },
        hr: {
            borderColor: '#0b5263',
            width: '100%',
            borderWidth: 1,
            height: 0,
        }
    };
    var option = {
        backgroundColor: '#fff',
        title: {
            text: '学生违纪情况',
            subtext: total_datas,
            textStyle: {
                color: '#00BFFF',
                fontSize: 40,
                align: 'center'
            },
            subtextStyle: {
                fontSize: 30,
                color: ['#ff9d19']
            },
            x: 'center',
            y: 'center',
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            y: 'center',
            itemWidth: 24,
            itemHeight: 18,
            textStyle: {
                color: '#666'
            },
            itemGap: 30,
            data: ['班级违纪人数']
        },
        series: [{
            name: '班级总人数',
            type: 'pie',
            itemStyle: {
                normal: {
                    borderWidth: 5,
                    borderColor: "#FFFFFF00"
                }
            },
            radius: ['38%', '50%'],
            hoverAnimation: false,
            color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
            label: {
                normal: {
                    formatter: function (params, ticket, callback) {
                        var total = num.value;
                        var percent = 0;
                        percent = ((params.value / total) * 100).toFixed(1);
                        return '{yellow|' + params.value + '}\n{blue|' + percent + '%}';
                    },
                    rich: rich
                },
            },
            labelLine: {
                normal: {
                    length: 55 * scale,
                    length2: 10,
                    lineStyle: {
                        color: '#0b5263'
                    }
                }
            },
            data: echartData
        }]
    };
    userEn.setOption(option);
}

</script>

<template>
    <div ref="info" style="width: 1200px; height: 400px"></div>
    <div ref="info2" style="width: 1200px; height: 400px"></div>
</template>

<style scoped></style>
